import { Button, Divider, Popconfirm, Space, Tag, Modal, message } from "antd";

import styles from "./QuestionCard.module.scss";

import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  ExclamationOutlined,
  LineChartOutlined,
  StarOutlined,
} from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import { useRequest } from "ahooks";
import {
  duplicateQuestionService,
  updateQuestionService,
} from "../service/question";
type PropType = {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createdAt: string;
};
const { confirm } = Modal;
export default function QuestionCard(props: PropType) {
  const { title, createdAt, _id, answerCount, isPublished, isStar } = props;
  const nav = useNavigate();
  const [isStarState, setIsStarState] = useState(isStar);
  const { loading: changeStarLoading, run: changeStar } = useRequest(
    async () => {
      await updateQuestionService(_id, { isStar: !isStarState });
    },
    {
      manual: true,
      onSuccess() {
        setIsStarState(!isStarState);
        message.success("已设置");
      },
    }
  );
  // function duplicate() {
  //   message.success("复制成功");
  // }
  const { loading: duplicateLoading, run: duplicate } = useRequest(
    async () => await duplicateQuestionService(_id),
    {
      manual: true,
      onSuccess(result: any) {
        message.success("复制成功");
        nav(`/question/edit/${result.id}`);
      },
    }
  );
  const [isDeletedState, setIsDeletedState] = useState(false);
  const { loading, run } = useRequest(
    async () => await updateQuestionService(_id, { isDeleted: true }),
    {
      manual: true,
      onSuccess() {
        message.success("删除成功");
        setIsDeletedState(true);
      },
    }
  );
  function del() {
    confirm({
      title: "确定删除该问卷?",
      icon: <ExclamationOutlined />,
      onOk: () => {
        run();
      },
    });
  }
  return (
    !isDeletedState && (
      <div className={styles.container}>
        <div className={styles.title}>
          <div className={styles.left}>
            <Link
              to={
                isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`
              }
            >
              <Space>
                {isStarState && <StarOutlined style={{ color: "red" }} />}
                {title}
              </Space>
            </Link>
          </div>
          <div className={styles.right}>
            <Space>
              {isPublished ? (
                <Tag color="processing">已发布</Tag>
              ) : (
                <Tag>未发布</Tag>
              )}
              <span>答卷:{answerCount}</span>
              <span>{createdAt}</span>
            </Space>
          </div>
        </div>
        <Divider style={{ margin: "12px 0" }} />
        <div className={styles["button-container"]}>
          <div className={styles.left}>
            <Space>
              <Button
                icon={<EditOutlined />}
                type="text"
                size="small"
                onClick={() => {
                  nav(`/question/edit/${_id}`);
                }}
              >
                编辑问卷
              </Button>
              <Button
                icon={<LineChartOutlined />}
                type="text"
                size="small"
                onClick={() => {
                  nav(`/question/stat/${_id}`);
                }}
              >
                数据统计
              </Button>
            </Space>
          </div>
          <div className={styles.right}>
            <Space>
              <Button
                type="text"
                icon={<StarOutlined />}
                onClick={changeStar}
                loading={changeStarLoading}
              >
                {isStarState ? "取消标星" : "标星"}
              </Button>
              <Popconfirm
                title="确定复制该问卷？"
                onConfirm={duplicate}
                okText="是"
                cancelText="否"
              >
                <Button
                  type="text"
                  icon={<CopyOutlined />}
                  loading={duplicateLoading}
                >
                  复制
                </Button>
              </Popconfirm>

              <Button
                type="text"
                icon={<DeleteOutlined />}
                onClick={del}
                loading={loading}
              >
                删除
              </Button>
            </Space>
          </div>
        </div>
      </div>
    )
  );
}
